<template>
    <div>
		<headerSearch :title="headerTitle" :searchBack="true" @done="gotobtn"></headerSearch>
        <!-- 搜索框 -->
        <div class="search_all_intop" :style="search_intop" v-if="searchISshow"> </div>
        <div class="search_all" v-if="searchISshow">
            <span class="search_span clear">
                <i class="iconfont icon-sousuo"></i>
                <input type="text" v-model="search" placeholder="搜索">
                <i class="iconfont icon-guanbi" v-if="clearShow" @click="clearClick"></i>
            </span>
            <button class="search_cancel fr" @click="searchCancel">取消</button>
        </div>
        <div class="pagecontent">
            <div class="main-suspension" style="height: 2.2rem !important;position: fixed;width: 100%;overflow: hidden; z-index: 10;"> 
                <div class="suspension-top" style="height: 0.88rem !important;"></div>
                <div class="suspension-info user_card_box" style="height: 2rem !important;">
                    <div class="suspension-info-top main_user_card">
                        <ul>
                            <li @click="handClick('friendmycard',1)" :class="{'active':'friendmycard'===targetFlag}">
                                <i class="iconfont icon-tongshiquanzi" :style="style_friendmycard"></i>
                                <span>好友收藏</span>
                            </li>
                            <li @click="handClick('companycard',2)" :class="{'active':'companycard'===targetFlag}">
                                <i class="iconfont icon-qiye" :style="style_companycard"></i>
                                <span>企业收藏</span>
                            </li>
                            <li @click="handClick('circleCard',4)" :class="{'active':'circleCard'===targetFlag}">
                                <i class="iconfont icon-youquanlogozhuanhuan" :style="style_circleCard"></i>
                                <span>圈子收藏</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 渲染不同的名片方式 -->
            <div v-if="targetFlag==='friendmycard'" style="margin-top: 2.24rem;">
                <div class="mycardlist" v-for="(item, i) in CardList" :key="i">
                    <div class="mycardlist-top clear">
                        <div class="shareCard">
                            <span><i class="iconfont icon-fenxiang4"></i>分享</span>
                        </div>
                        <img @click="viewCard(item.id,1)" :src="item.userhead" v-if="item.userhead" alt="">
                        <img @click="viewCard(item.id,1)" src="../common/images/youquan.png" alt="" v-else>
                        <div @click="viewCard(item.id,1)" class="people-info_h4">
                            <h4><strong>{{item.username}}</strong><span style="display:inline-block;font-weight:normal;">{{item.position}}</span></h4> 
                            <span>{{item.company}}</span> 
                            <span class="iphonenum"><i class="iconfont icon-dianhua2"></i>{{item.showmobile}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="targetFlag==='companycard'" style="margin-top: 2.24rem;">
                <div class="mycardlist" v-for="(item, ind) in ColleagueList" :key="ind">
                    <div class="mycardlist-top clear">
                        <div class="shareCard">
                            <span><i class="iconfont icon-fenxiang4"></i>分享</span>
                        </div>
                        <img @click="viewCard(item.id,2)" :src="item.log_img" v-if="item.log_img" alt="">
                        <img @click="viewCard(item.id,2)" src="../common/images/youquan.png" alt="" v-else>
                        <div @click="viewCard(item.id,2)" class="people-info_h4">
                            <h4>{{item.name}}</h4> 
                            <span v-if="item.address">{{item.address}}</span>
                            <span v-else>暂无填写公司地址</span> 
                            <span class="iphonenum" v-if="item.website"><i class="iconfont icon-dianhua2"></i>{{item.website}}</span>
                            <span class="iphonenum" v-else><i class="iconfont icon-dianhua2"></i>暂无填写公司</span>
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="targetFlag==='circleCard'" style="margin-top: 2.24rem;">
                <div class="mycardlist" v-for="(item, inde) in CollectionList" :key="inde">
                    <div class="mycardlist-top circle_top clear">
                        <div class="shareCard">
                            <span><i class="iconfont icon-fenxiang4"></i>分享</span>
                        </div>
                        <img @click="viewCard(item.cid,3)" :src="item.c_logo" v-if="item.c_logo" alt="">
                        <img src="../common/images/youquan.png" v-if="item.c_type == 3 && !item.c_logo">
                        <span class="img_info_one" style="color: #DD948E;" v-if="item.c_type == 1 || item.c_type == 2">{{item.c_name.substring(0,1)}}</span>
                        <div @click="viewCard(item.cid,3)" class="people-info_h4">
                            <h4>{{item.c_name}}</h4> 
                            <span>{{item.c_hy_name}}</span> 
                            <span>{{item.c_ad_name}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import headerSearch from '../public/header-search.vue';
    export default {
        data() {
            return {
                headerTitle: '我的收藏',
                targetFlag: 'friendmycard',
                // CardList:[],    //好友收藏
                // ColleagueList:[], //企业收藏
                // CollectionList:[],  //圈子收藏
                style_friendmycard: 'background-color: #9BDF38; color: #fff', // 选项卡好友收藏样式
                style_companycard: 'background-color: #fff; color: #66D9FF', // 选项卡企业收藏样式
                style_circleCard: 'background-color: #fff; color: #FF5158', // 选项卡圈子收藏样式
                cid: '', // 圈子收藏id
                Card:{
                    access_token:'',
                    user_id: 0
                },
                type: '',   //type对应各自的收藏
                idtype: '',   //idtype 对应各自跳转的首页

                searchISshow: false,   //关键字搜索框出现
                clearShow: false,      //清除内容
                search: '',            //输入内容
                userCards: [],             //过滤内容替代的数组字段
                colleagueCards: [],
                collectionCards: [],
                search_intop: '',     //遮罩层
            }
        },
        mounted() {
            let that = this;
            that.Card.access_token = window.localStorage.getItem('access_token');
            that.Card.user_id = JSON.parse(window.localStorage.getItem('userInfo')).uid;
            // 获取收藏的名片
            that.getCollectionList(1);
        },
        watch: {
            search(value) {
                if(value != '') {
                  this.clearShow = true;
                  this.search_intop = 'background-color: transparent; z-index: 0;'
                }else {
                  this.clearShow = false;
                  this.search_intop = 'background-color: rgba(0, 0, 0, 0.5);'
                }
            }
        },
        methods: {
            //点击进入企业名片详情 --好友收藏进入个人首页
            viewCard(id,idtype) {
                this.idtype = idtype;
                this.cid = id;
                if(idtype == 1) {
                    this.$router.push({
                        path: '/userCenter/userHomePage',
                        query: {
                            uid: id
                        }
                    })
                }else if(idtype == 2) {
                    //点击企业跳转到企业主页
                    if(this.$system != 'ios'){
                        this.$router.push({
                            path: '/userCenter/companyIndex',
                            query: {
                                cp_id: id
                            }
                        })
                    }else{
                        window.location.href = '/userCenter/companyIndex?cp_id=' + id;
                    }       
                }else if(idtype == 3) {
                    this.$router.push({
                        path: '/userCenter/circleindex',
                        query: {
                            paicheNo: id
                        }
                    })
                }

            },
            // 获取收藏列表
            getCollectionList(type){
                this.$fetch(this.$path + '/index.php/api/collection/getCollection/' + type + '/' + this.Card.user_id).then((response)=>{
                    console.log("收藏列表",response.data);
                    if(response.code == 200){
                        if(type == 1) {
                            this.userCards = response.data;
                        }else if(type == 2) {
                            this.colleagueCards = response.data;
                        }else if(type == 4){
                            this.collectionCards = response.data;
                        }
                    }

                })
            
            },
            // 切换分类名片
            handClick(flag,type) {
                this.targetFlag = flag;
                this.type = type;
                this.getCollectionList(type);
                if(flag == 'friendmycard') {
                    this.style_friendmycard = 'background-color: #9BDF38; color: #fff';
                    this.style_companycard = 'background-color: #fff; color: #66D9FF';
                    this.style_circleCard = 'background-color: #fff; color: #FF5158';
                }else if(flag == 'companycard'){
                    this.style_friendmycard = 'color: #9BDF38; background-color: #fff';
                    this.style_companycard = 'color: #fff; background-color: #66D9FF';
                    this.style_circleCard = 'background-color: #fff; color: #FF5158';
                }else{
                    this.style_friendmycard = 'color: #9BDF38; background-color: #fff';
                    this.style_companycard = 'background-color: #fff; color: #66D9FF';
                    this.style_circleCard = 'color: #fff; background-color: #FF5158';
                }
            },
            // 点击搜索图标出现搜索框
            gotobtn() {
                this.searchISshow = true;
            },
            // 点击取消隐藏搜索框
            searchCancel() {
                this.searchISshow = false;
                this.search = '';
            },
            // 清除内容
            clearClick() {
                this.search = '';
            }
        },
        computed: {
            //过滤方法--好友收藏
            CardList: function() {
                let that = this;
                var _search = that.search;
                if (_search) {
                    //不区分大小写处理
                    var reg = new RegExp(_search, 'ig')
                    //es6 filter过滤匹配，有则返回当前，无则返回所有
                    return that.userCards.filter(function(e) {
                        //匹配所有字段
                        return Object.keys(e).some(function(key) {
                            let data = e.username + e.position + e.company + e.showmobile;
                            return data.match(reg);
                        })
                        //匹配某个字段
                        //  return e.name.match(reg);
                    })
                };
                return that.userCards;
            },
            //过滤方法--企业收藏
            ColleagueList: function() {
                let that = this;
                var _search = that.search;
                if (_search) {
                    //不区分大小写处理
                    var reg = new RegExp(_search, 'ig')
                    //es6 filter过滤匹配，有则返回当前，无则返回所有
                    return that.colleagueCards.filter(function(e) {
                        //匹配所有字段
                        return Object.keys(e).some(function(key) {
                            let data = e.name;
                            return data.match(reg);
                        })
                        //匹配某个字段
                        //  return e.name.match(reg);
                    })
                };
                return that.colleagueCards;
            },
            //过滤方法--圈子收藏
            CollectionList: function() {
                let that = this;
                var _search = that.search;
                if (_search) {
                    //不区分大小写处理
                    var reg = new RegExp(_search, 'ig')
                    //es6 filter过滤匹配，有则返回当前，无则返回所有
                    return that.collectionCards.filter(function(e) {
                        //匹配所有字段
                        return Object.keys(e).some(function(key) {
                            let data = e.c_name;
                            return data.match(reg);
                        })
                        //匹配某个字段
                        //  return e.CardName.match(reg);
                    })
                };
                return that.collectionCards;
            }
        },  
        components: {
            headerSearch
        }
    }
</script>

<style>
@import '../common/css/userCenter';
/* 名片 */
.user_card_box {
    box-shadow: 0 2px 3px -1px #f3ecec;
}
.main_user_card ul {
    display: flex;
    justify-content: space-between;
}
.main_user_card ul>li {
    flex: 1;
    text-align: center;
    width: 2.36rem;
}
/* 企业收藏 */
.main_user_card ul>li .icon-tongshiquanzi {
    width: 0.84rem;
    height: 0.84rem;
    font-size: 0.5rem;
    display: block;
    margin: 0 auto;
    background-color: #9BDF38;
    border: 1px solid #9BDF38;
    border-radius: 16px;
    color: #fff;
    line-height: 0.84rem;
    text-align: center;
    margin-bottom: 0.2rem;
}
/* 好友收藏 */
.main_user_card ul>li .icon-qiye {
    width: 0.84rem;
    height: 0.84rem;
    font-size: 0.5rem;
    display: block;
    margin: 0 auto;
    background-color: transparent;
    border-radius: 16px;
    color: #66D9FF;
    border: 1px solid #66D9FF;
    line-height: 0.84rem;
    text-align: center;
    margin-bottom: 0.2rem;
}
/* 圈子收藏 */
.main_user_card ul>li .icon-youquanlogozhuanhuan {
    width: 0.84rem;
    height: 0.84rem;
    font-size: 0.5rem;
    display: block;
    margin: 0 auto;
    background-color: transparent;
    border-radius: 16px;
    color: #FF5158;
    border: 1px solid #FF5158;
    line-height: 0.84rem;
    text-align: center;
    margin-bottom: 0.2rem;
}
.main_user_card ul>li span {
    font-size: 0.26rem;
    color: #333;
    font-weight: 400;
    display: block;
}


/* 我的名片 */
.mycardlist {
    width: 7.1rem;
    height: auto;
    margin: 0 auto;
    border-radius: 4px;
    box-shadow: 1px 1px 10px 2px #eee;
    background-color: #fff;
}
.mycardlist .mycardlist-top {
    margin: 0.2rem 0.36rem;
}
.mycardlist-top img {
    width: 1.5rem;
    height: 1.5rem;
    float: left;
    margin: 0.2rem 0.4rem 0.2rem 0;
    box-sizing: border-box;
    border-radius: 50%;
}
.mycardlist-top .shareCard {
    font-size: 0.22rem;
    color: #333;
    text-align: right;
    line-height: 0.8rem;
    margin-bottom: -0.3rem;
}
.mycardlist-top .shareCard .icon-fenxiang4,
.mycardlist-top .shareCard .icon-bianji1,
.mycardlist-top .shareCard .icon-baocun {
    font-size: 0.24rem;
    color: #e50838;
    font-weight: bold;
    margin: 0 0.12rem;
}
.mycardlist-top .people-info_h4 {
    padding: 0.2rem 0  0.6rem 0;
    box-sizing: border-box;
}
.mycardlist-top .people-info_h4 h4 {
    font-size: 0.34rem;
    color: #333;
    text-align: left;
    line-height: 0.5rem;
    margin-bottom: 0.06rem;
    width: 4.37rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
}
.mycardlist-top .people-info_h4 strong {
    display: inline-block;
    margin-right: 0.1rem;
}
.mycardlist-top .people-info_h4 span {
    font-size: 0.28rem;
    color: #999;
    display: block;
    text-align: left;
    line-height: 0.4rem;
}
.mycardlist-top .people-info_h4 .iphonenum {
    color: #e50838;
}
.mycardlist-top .people-info_h4 .icon-dianhua2,
.mycardlist-top .people-info_h4 .icon-gongsi,
.mycardlist-top .people-info_h4 .icon-dizhi1 {
    font-size: 0.22rem;
    color: #999;
    margin-right: 0.1rem;
}
.mycardlist {
    /* margin: 0.2rem 0.36rem; */
}
.mycardlist .detailed-info {
    /* width: 4.6rem; */
}
.mycardlist .detailed-info p {
    font-size: 0.28rem;
    color: #e50838;
    text-align: left;
    line-height: 0.56rem;
}
.mycardlist .detailed-info p:last-child {
    color: #999;
}
.adress_text {
    display: flex;
    width: 5.2rem;
    line-height: 0.36rem;
}
.detailed-info p .iconfont {
    width: 0.24rem;
    font-size: 0.24rem;
    float: left;
    margin-right: 0.14rem;
    color: #999;
}
.detailed-info p a {
    font-size: 0.28rem;
    color: #e50838;
    text-align: left;
    line-height: 0.56rem;
}
.mycardlist .scan_code {
    margin-top: -.9rem;
    position: relative;
}
.mycardlist .scan_code .icon-erweima {
    width: 0.47rem;
    height: 0.47rem;
    font-size: 0.47rem;
    color: #a7a2a2;
}
.mycardlist .scan_code img {
    position: absolute;
    right: 0;
}

/* 关键字搜索 */
.search_all_intop {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 12;
}
.search_all {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 12;
    background-color: #e50838;
    width: 100%;
    height: 0.88rem;
    line-height: 0.88rem;
}
.search_all .search_span {
    position: relative;
    width: 100%;
    height: 0.88rem;
}
.search_all .search_span .icon-sousuo {
    font-size: 0.3rem !important;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0.16rem 0.2rem 0 -0.6rem;
    box-sizing: border-box;
    height: 0.88rem;
    margin-bottom: -0.3rem;
}
.search_all .search_span input {
    display: inline-block;
    width: 6.5rem;
    margin: 0 auto;
    margin-left: -0.7rem;
    height: 0.54rem;
    line-height: 0.54rem;
    background-color: #fff;
    margin-top: -0.1rem;
    border-radius: 4px;
    padding-left: 0.5rem;
    font-size: 0.28rem;
}
.search_all .search_span .icon-guanbi {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0.14rem 0.12rem 0 0.12rem;
}
.search_all .search_cancel {
    margin-top: -0.65rem;
    margin-right: 0.12rem;
    font-size: 0.28rem;
    color: #fff;
}

/* .circle_top .img_info_one {
    width: 1rem;
    height: 1rem;
    font-size: 0.3rem;
    line-height: 1rem;
    text-align: center;   
    background: url('../common/images/UI-04.png') no-repeat center;
    background-size: cover;
} */
.circle_top .img_info_one {
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: super;
    font-size: 0.3rem;
    line-height: 1.5rem;
    text-align: center;
    background: url('../common/images/UI-04.png') no-repeat center;
    background-size: cover;
    display: block;
    float: left;
    margin: .2rem .4rem .2rem 0;
    box-sizing: border-box;
    border-radius: 50%;
}
.circle_top .soc_list_img {
    width: 1.1rem;
    height: 1.1rem;
    display: block;
    text-align: center;
    vertical-align: middle;
    margin-bottom: 0.1rem;
}



</style>